<template>
  <div class="wik-audit">
    <div class="wik-audit-icon">
      <svg-icon :name="name"></svg-icon>
    </div>
    <div class="wik-audit-content" :style="`color:${SP_COLOR[auditData.spStatus]}`">{{ AUDIT_CONTENT[auditData.spStatus] }}</div>
    <!-- <div class="wik-audit-footer">2025-02-12 18:00:32</div> -->
    <div class="wik-audit-btn" v-show="auditData.spStatus != 1 && auditData.spStatus != 2" @click="openDialog">重新发起审核</div>
  </div>
</template>
<script lang="ts" setup>
import { computed, inject } from "vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { AUDIT_CONTENT, SP_COLOR } from "../constant";
import { useEdit } from "../hooks/useEdit";
const popClose = inject<any>("popClose");

type Props = {
  auditData: any;
};
const { auditData = {} } = defineProps<Props>();

const { openDialog } =
  auditData.spStatus != 1 && auditData.spStatus != 2
    ? useEdit({
        id: auditData.id,
        callback: () => {
          popClose();
        }
      })
    : { openDialog: () => {} };

const name = computed(() => {
  if (auditData.spStatus == 1) {
    return "wait";
  } else if (auditData.spStatus == 2) {
    return "go";
  } else {
    return "stop";
  }
});
</script>
<style lang="scss" scoped>
.wik-audit {
  width: 100%;
  height: 236px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  &-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-top: 30px;
    font-size: 64px;
  }
  &-content {
    margin: 8px 0;
    font-size: 20px;
    color: #74d98c;
  }
  &-footer {
    font-size: 12px;
    color: #999999;
  }
  &-btn {
    margin-top: 18px;
    cursor: pointer;
    font-size: 16px;
    color: #5378f6;
  }
}
</style>
